<template>
    <view class="container">
        <!-- 基本信息 -->
        <view class="basicInfo">
            <view class="title">
                基本信息
            </view>
            <view class="infoContent">
                <view class="infoItem">
                    <view class="key">
                        企业类型
                    </view>
                    <view class="value">
                        <view class="btnGroup">
                            <view v-if="certifyInfo.serverUserAccountInfoCompanyType===1" class="selected">
                                个体工商户
                            </view>
                            <view v-else class="selected">
                                企业
                            </view>
                        </view>
                    </view>
                </view>

                <view class="infoItem">
                    <view class="key">
                        公司名称
                    </view>
                    <view class="value">
                        {{ certifyInfo.serverUserAccountInfoCompanyName }}
                    </view>
                </view>

                <view class="infoItem">
                    <view class="key">
                        营业执照编号
                    </view>
                    <view class="value">
                        {{ certifyInfo.serverUserAccountInfoBusinessLicenseNumber }}
                    </view>
                </view>

                <view class="infoItem">
                    <view class="key">
                        上传营业执照
                    </view>
                    <view class="value">
                        <view class="uploadCertify">
                            已上传
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 联系人信息 -->
        <view class="contactInfo">
            <view class="title">
                联系人信息
            </view>
            <view class="infoContent">
                <view class="infoItem">
                    <view class="key">
                        联系人姓名
                    </view>
                    <view class="value">
                        {{ certifyInfo.serverUserAccountInfoContactName }}
                    </view>
                </view>
                <view class="infoItem">
                    <view class="key">
                        手机号码
                    </view>
                    <view class="value">
                        {{ certifyInfo.serverUserAccountInfoTel }}
                    </view>
                </view>
                <view class="infoItem">
                    <view class="key">
                        电子邮箱
                    </view>
                    <view class="value">
                        {{ certifyInfo.serverUserAccountInfoEmail }}
                    </view>
                </view>
            </view>
        </view>

        <!-- 公户信息 -->
        <view class="accountInfo">
            <view class="title">
                公户信息
            </view>
            <view class="infoContent">
                <view class="infoItem">
                    <view class="key">
                        账户名称
                    </view>
                    <view class="value">
                        {{ certifyInfo.serverUserAccountInfoCorporateName }}
                    </view>
                </view>
                <view class="infoItem">
                    <view class="key">
                        账户号码
                    </view>
                    <view class="value">
                        {{ certifyInfo.serverUserAccountInfoCorporateNumber }}
                    </view>
                </view>
                <view class="infoItem">
                    <view class="key">
                        开户银行
                    </view>
                    <view class="value">
                        {{ certifyInfo.serverUserAccountInfoBank }}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
	import * as commssionApi from '@/api/commssion/commssion.js'
	export default {
		data() {
			return {
				certifyInfo: {
					certificationType: 1,
					serverUserAccountInfoCompanyType: 1,
					// 企业类型
					serverUserAccountInfoCompanyName: '',
					serverUserAccountInfoBusinessLicenseNumber: '',
					serverUserAccountInfoBusinessLicenseUrl: null,
					serverUserAccountInfoContactName: '',
					serverUserAccountInfoTel: '',
					serverUserAccountInfoEmail: '',
					serverUserAccountInfoCorporateName: '',
					serverUserAccountInfoCorporateNumber: '',
					serverUserAccountInfoBank: ''
				},
				// 判断是首次认证还是重新认证




			};
		},
		onLoad(options) {
			 this.getCertifyInfo();
		},
		computed: {
		
		},
		methods: {
			async getCertifyInfo(){
				const res=await commssionApi.getCertifInfo();
				if(res.data.data!=null&&res.data.code===200){
					let responseData = res.data.data;
					// 使用解构赋值，将响应数据中的值直接赋给 addressData 对象的对应属性  
					Object.keys(responseData).forEach(key => {
						if (key in this.certifyInfo) {
							this.certifyInfo[key] = responseData[key];
						}
					});
				}
				
			}

		
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;

		// 基本信息  
		.basicInfo {
			position: relative;
			margin-bottom: 20rpx;
			margin-top: 12rpx;
			box-sizing: border-box;
			width: 694rpx;
			height: 446rpx;
			opacity: 1;
			border-radius: 14rpx;
			background: rgba(255, 255, 255, 1);


			.title {
				margin-top: 40rpx;
				margin-left: 30rpx;
				margin-bottom: 30rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);

			}

			.infoContent {
				margin-left: 30rpx;

				.infoItem {
					display: flex;
					align-items: center;

					margin-bottom: 40rpx;

					.key {

						font-weight: 400;
						color: rgba(82, 82, 84, 1);
						font-size: 32rpx;
					}

					.value {
						position: absolute;
						left: 265rpx;
						color: rgba(151, 151, 151, 1);
						font-weight: 400;

						.btnGroup {
							display: flex;

							.selected {
								color: white;
								background: rgba(223, 161, 60, 1);
								font-size: 28rpx;
								font-weight: 500;
								letter-spacing: 0rpx;
								line-height: 40.54rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 28rpx;
								box-sizing: border-box;
								height: 48rpx;
								opacity: 1;
								border-radius: 14rpx;
								padding: 2rpx 24rpx;
								margin-right: 20rpx;
							}

							.default {
								font-size: 28rpx;
								font-weight: 500;
								letter-spacing: 0rpx;
								line-height: 40.54rpx;
								color: rgba(0, 0, 0, 1);
								background: rgba(237, 233, 228, 1);
								margin-left: 20rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 28rpx;
								box-sizing: border-box;
								height: 48rpx;
								opacity: 1;
								border-radius: 14rpx;
								padding: 2rpx 24rpx;
								margin-right: 20rpx;
							}

						}

						.uploadCertify {
							box-sizing: border-box;
							width: 380rpx;
							height: 48rpx;
							opacity: 1;
							border-radius: 8rpx;
							background: rgba(243, 243, 245, 1);
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 24rpx;
							color: rgba(147, 147, 147, 1);
						}
					}
				}
			}
		}

		// 联系人信息  
		.contactInfo {
			position: relative;
			margin-bottom: 20rpx;
			box-sizing: border-box;
			width: 694rpx;
			height: 398rpx;
			opacity: 1;
			border-radius: 14rpx;
			background: rgba(255, 255, 255, 1);

			.title {
				margin-bottom: 42rpx;
				margin-top: 42rpx;
				margin-left: 30rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);
			}

			.infoContent {
				margin-left: 30rpx;

				.infoItem {
					display: flex;
					align-items: center;
					margin-bottom: 42rpx;

					.key {

						font-weight: 400;
						color: rgba(82, 82, 84, 1);
						font-size: 32rpx;
					}

					.value {
						position: absolute;
						left: 265rpx;
						color: rgba(151, 151, 151, 1);
						font-weight: 400;
					}
				}
			}
		}

		// 公户信息  
		.accountInfo {
			position: relative;
			box-sizing: border-box;
			width: 694rpx;
			height: 368rpx;
			opacity: 1;
			border-radius: 14rpx;
			background: rgba(255, 255, 255, 1);

			.title {
				box-sizing: border-box;
				margin-bottom: 30rpx;
				margin-top: 40rpx;
				margin-left: 30rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);
			}

			.infoContent {
				margin-left: 30rpx;

				.infoItem {
					display: flex;
					align-items: center;
					margin-bottom: 30rpx;

					.key {

						font-weight: 400;
						color: rgba(82, 82, 84, 1);
						font-size: 32rpx;

					}

					.value {
						position: absolute;
						left: 265rpx;
						color: rgba(151, 151, 151, 1);
						font-weight: 400;
					}
				}
			}
		}


	

	}
</style>